import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Basic

Item {
    width: parent.width
    height: parent.height

    Button {
        x: 50
        y: 50
        text: "Show Custom Popup"
        onClicked: customPopup.open()
    }

    Popup {
        id: customPopup
        x: 50
        y: 90
        width: 300
        height: 200
        modal: true
        focus: true

        background: Rectangle {
            color: "#f0f0f0"
            border.color: "#2196F3"
            border.width: 2
            radius: 10
        }

        Column {
            anchors.centerIn: parent
            spacing: 15

            Label {
                text: "Custom Styled Popup"
                font.pixelSize: 18
                font.bold: true
                color: "#2196F3"
            }

            Rectangle {
                width: 200
                height: 1
                color: "#2196F3"
            }

            Text {
                text: "This popup has a custom style with:\n• Rounded corners\n• Custom colors\n• Border"
                color: "#333"
                font.pixelSize: 14
            }

            Button {
                text: "Close"
                onClicked: customPopup.close()
                background: Rectangle {
                    color: "#2196F3"
                    radius: 5
                }
                contentItem: Text {
                    text: parent.text
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }
        }
    }
}
